

Ext.onReady(function(){

    var currentName;
    
    var replace = function(config, name){
        var btns = Ext.getCmp('btns');
        
        if (name && name != currentName) {
            currentName = name;
            
            btns.remove(0);
            
            btns.add(Ext.apply(config, {
                layout: 'hbox'
            }));
        };
        
        btns.doLayout();
    }
    
    
    var viewport = new Ext.Viewport({
        layout: 'border',
        
        items: [{
            id: 'btns',
            region: 'north',
            baseCls: 'x-plain',
            split: true,
            height: 50,
            minHeight: 40,
            maxHeight: 85,
            layout: 'fit',
            margins: '5 5 0 5',
            items: {
                baseCls: 'x-plain',
                html: '<p style="padding:10px;color:#556677;">Select a configuration below:</p>'
            }
        }, {
            region: 'center',
            margins: '0 5 5 5',
            layout: 'anchor',
            
            items: [{
                anchor: '100%',
                baseCls: 'x-plain',
                layout: 'hbox',
                layoutConfig: {
                    padding: 10
                },
                defaults: {
                    margins: '0 5 0 0',
                    pressed: false,
                    toggleGroup: 'btns',
                    allowDepress: false
                },
                items: [{
                    xtype: 'button',
                    text: 'Spaced',
                    handler: function(){
                        replace({
                            layoutConfig: {
                                padding: '5',
                                align: 'top'
                            },
                            defaults: {
                                margins: '0 5 0 0'
                            },
                            items: [{
                                xtype: 'button',
                                text: 'Button 1'
                            }, {
                                xtype: 'spacer',
                                flex: 1
                            }, {
                                xtype: 'button',
                                text: 'Button 2'
                            }, {
                                xtype: 'button',
                                text: 'Button 3'
                            }, {
                                xtype: 'button',
                                text: 'Button 4',
                                margins: '0'
                            }]
                        }, 'spaced');
                    }
                }, {
                    xtype: 'button',
                    text: 'Align: top',
                    handler: function(){
                        replace({
                            layoutConfig: {
                                padding: '5',
                                align: 'top'
                            },
                            defaults: {
                                margins: '0 5 0 0'
                            },
                            items: [{
                                xtype: 'button',
                                text: 'Button 1'
                            }, {
                                xtype: 'button',
                                text: 'Button 2'
                            }, {
                                xtype: 'button',
                                text: 'Button 3'
                            }, {
                                xtype: 'button',
                                text: 'Button 4'
                            }]
                        }, 'align top');
                    }
                }, {
                    xtype: 'button',
                    text: 'Align: middle',
                    handler: function(){
                        replace({
                            layoutConfig: {
                                padding: '5',
                                align: 'middle'
                            },
                            defaults: {
                                margins: '0 5 0 0'
                            },
                            items: [{
                                xtype: 'button',
                                text: 'Button 1'
                            }, {
                                xtype: 'button',
                                text: 'Button 2'
                            }, {
                                xtype: 'button',
                                text: 'Button 3'
                            }, {
                                xtype: 'button',
                                text: 'Button 4'
                            }]
                        }, 'align middle');
                    }
                }, {
                    xtype: 'button',
                    text: 'Align: stretch',
                    handler: function(){
                        replace({
                            layoutConfig: {
                                padding: '5',
                                align: 'stretch'
                            },
                            defaults: {
                                margins: '0 5 0 0'
                            },
                            items: [{
                                xtype: 'button',
                                text: 'Button 1'
                            }, {
                                xtype: 'button',
                                text: 'Button 2'
                            }, {
                                xtype: 'button',
                                text: 'Button 3'
                            }, {
                                xtype: 'button',
                                text: 'Button 4'
                            }]
                        }, 'align stretch');
                    }
                }, {
                    xtype: 'button',
                    text: 'Align: stretchmax',
                    handler: function(){
                        replace({
                            layoutConfig: {
                                padding: '5',
                                align: 'stretchmax'
                            },
                            defaults: {
                                margins: '0 5 0 0'
                            },
                            items: [{
                                xtype: 'button',
                                text: 'Button 1'
                            }, {
                                xtype: 'button',
                                text: 'Button 2'
                            }, {
                                xtype: 'button',
                                text: 'Button 3'
                            }, {
                                xtype: 'button',
                                text: 'Button 4'
                            }]
                        }, 'align stretchmax');
                    }
                }]
            }, {
                anchor: '100%',
                baseCls: 'x-plain',
                layout: 'hbox',
                layoutConfig: {
                    padding: '0 10 10'
                },
                defaults: {
                    margins: '0 5 0 0',
                    pressed: false,
                    toggleGroup: 'btns',
                    allowDepress: false
                },
                items: [{
                    xtype: 'button',
                    text: 'Flex: All even / Align: middle',
                    handler: function(){
                        replace({
                            layoutConfig: {
                                padding: '5',
                                align: 'middle'
                            },
                            defaults: {
                                margins: '0 5 0 0'
                            },
                            items: [{
                                xtype: 'button',
                                text: 'Button 1',
                                flex: 1
                            }, {
                                xtype: 'button',
                                text: 'Button 2',
                                flex: 1
                            }, {
                                xtype: 'button',
                                text: 'Button 3',
                                flex: 1
                            }, {
                                xtype: 'button',
                                text: 'Button 4',
                                flex: 1,
                                margins: '0'
                            }]
                        }, 'flex all even');
                    }
                }, {
                    xtype: 'button',
                    text: 'Flex: Ratio / Align: top',
                    handler: function(){
                        replace({
                            layoutConfig: {
                                padding: '5',
                                align: 'top'
                            },
                            defaults: {
                                margins: '0 5 0 0'
                            },
                            items: [{
                                xtype: 'button',
                                text: 'Button 1',
                                flex: 1
                            }, {
                                xtype: 'button',
                                text: 'Button 2',
                                flex: 1
                            }, {
                                xtype: 'button',
                                text: 'Button 3',
                                flex: 1
                            }, {
                                xtype: 'button',
                                text: 'Button 4',
                                flex: 3,
                                margins: '0'
                            }]
                        }, 'flex ratio');
                    }
                }, {
                    xtype: 'button',
                    text: 'Pack: start / Align: middle',
                    handler: function(){
                        replace({
                            layoutConfig: {
                                padding: '5',
                                pack: 'start',
                                align: 'middle'
                            },
                            defaults: {
                                margins: '0 5 0 0'
                            },
                            items: [{
                                xtype: 'button',
                                text: 'Button 1'
                            }, {
                                xtype: 'button',
                                text: 'Button 2'
                            }, {
                                xtype: 'button',
                                text: 'Button 3'
                            }, {
                                xtype: 'button',
                                text: 'Button 4'
                            }]
                        }, 'pack start');
                    }
                }, {
                    xtype: 'button',
                    text: 'Pack: center / Align: middle',
                    handler: function(){
                        replace({
                            layoutConfig: {
                                padding: '5',
                                pack: 'center',
                                align: 'middle'
                            },
                            defaults: {
                                margins: '0 5 0 0'
                            },
                            items: [{
                                xtype: 'button',
                                text: 'Button 1'
                            }, {
                                xtype: 'button',
                                text: 'Button 2'
                            }, {
                                xtype: 'button',
                                text: 'Button 3'
                            }, {
                                xtype: 'button',
                                text: 'Button 4',
                                margins: '0'
                            }]
                        }, 'pack center');
                    }
                }, {
                    xtype: 'button',
                    text: 'Pack: end / Align: middle',
                    handler: function(){
                        replace({
                            layoutConfig: {
                                padding: '5',
                                pack: 'end',
                                align: 'middle'
                            },
                            defaults: {
                                margins: '0 5 0 0'
                            },
                            items: [{
                                xtype: 'button',
                                text: 'Button 1'
                            }, {
                                xtype: 'button',
                                text: 'Button 2'
                            }, {
                                xtype: 'button',
                                text: 'Button 3'
                            }, {
                                xtype: 'button',
                                text: 'Button 4',
                                margins: '0'
                            }]
                        }, 'pack end');
                    }
                }]
            }]
        }]
    });
});
